<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color</title>
</head>
<body>
    <div class="test-named-color"></div>
    <div class="test-rgb"></div>
    <div class="test-hex-color"></div>
    <div class="test-hsl"></div>
    <div class="test-opacity"></div>
    <style>
        div{
            border: 1px solid;
            width:200px;
            height: 100px;
            margin-bottom: 3px;
        }
        .test-opacity{
            background-color: rgba(255, 0, 0, 1);
            transition: backgronu-color 1s;
        }
        .test-opacity:hover{
            background-color: rgba(255, 0, 0, 0.3);
        }
    </style>
    这是关键源码
    <hr>
    <pre>
        &ltdiv class="test-named-color">&lt/div>
        &ltdiv class="test-rgb">&lt/div>
        &ltdiv class="test-hex-color">&lt/div>
        &ltdiv class="test-hsl">&lt/div>
        &ltdiv class="test-opacity">&lt/div>
        &ltstyle>
            div{
                border: 1px solid;
                width:200px;
                height: 100px;
                margin-bottom: 3px;
            }
            .test-opacity{
                background-color: rgba(255, 0, 0, 1);
                transition: backgronu-color 1s;
            }
            .test-opacity:hover{
                background-color: rgba(255, 0, 0, 0.3);
            }
        &lt/style>
        </pre>
        <style>
            pre{
                border: 1px solid;
            }
        </style>
</body>
</html>